<template>
    <div class="container">
        <!-- 导航条 -->
        <Nav />
        <!-- END -->

        <!-- 轮播图 -->
        <SwiperComponent class="swiper_wraper" :cate="1" />
        <!-- END -->

        <!-- 新闻走马灯 -->
        <div class="block_wrap">
            <div class="news">
                <div class="news_label"><span class="text">{{$t('p1.news')}}</span></div>

                <div class="news_swiper">

                    <!-- <el-carousel v-if="newsDataList.length > 0" height="140px" arrow="never" indicator-position="outside"> -->
                    <el-carousel v-if="newsDataList.length > 0" arrow="never" indicator-position="outside">
                            <el-carousel-item v-for="(item, index) in newsDataList" :key="item.id">
                                <router-link target="_blank" :to="`/news_detail?id=${item.id}`">
                                    <div class="content_wrap">
                                        <div class="title">
                                            {{ item.title }}
                                        </div>
                                        <div class="sub_title">
                                            {{ item.subTitle }}
                                        </div>
                                    </div>
                                </router-link>
                            </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <!-- END -->

        <!-- 产品服务 -->
        <div class="block_wrap c1">
            <div class="service">
                <div class="wrap">
                    <!-- <div class="service_label wow animate__animated animate__bounceInLeft"> -->
                    <div class="service_label">
                        <div class="title">{{$t('p1.product.title')}}</div>
                        <div class="sub_title">{{$t('p1.product.desc')}}</div>
                    </div>

                    <!-- <div class="service_card_wrap wow animate__animated animate__bounceInRight"> -->
                    <div class="service_card_wrap">
                        <div class="text item">
                            <router-link to="/service?tab=HYJJFA">
                                <el-card class="box_card" shadow="hover">
                                    <div class="content_wrap">
                                        <div class="icon">
                                            <img :src="SS1"/>
                                        </div>
                                        <div class="desc_wrap">
                                            <div class="title">{{$t('p1.product.s1.text')}}</div>
                                            <div class="desc">{{$t('p1.product.s1.desc')}}</div>
                                        </div>
                                    </div>
                                </el-card>
                            </router-link>
                        </div>
                        <div class="text item">
                            <router-link to="/service?tab=RJYYKF">
                                <el-card class="box_card" shadow="hover">
                                    <div class="content_wrap">
                                        <div class="icon">
                                            <img :src="SS2"/>
                                        </div>
                                        <div class="desc_wrap">
                                            <div class="title">{{$t('p1.product.s2.text')}}</div>
                                            <div class="desc">{{$t('p1.product.s2.desc')}}</div>
                                        </div>
                                    </div>
                                </el-card>
                            </router-link>
                        </div>
                        <div class="text item">
                            <router-link to="/service?tab=SZJSFW">
                                <el-card class="box_card" shadow="hover">
                                    <div class="content_wrap">
                                        <div class="icon">
                                            <img :src="SS5"/>
                                        </div>
                                        <div class="desc_wrap">
                                            <div class="title">{{$t('p1.product.s3.text')}}</div>
                                            <div class="desc">{{$t('p1.product.s3.desc')}}</div>
                                        </div>
                                    </div>
                                </el-card>
                            </router-link>
                        </div>
                        <div class="text item">
                            <router-link to="/service?tab=XTJCFW">
                                <el-card class="box_card" shadow="hover">
                                    <div class="content_wrap">
                                        <div class="icon">
                                            <img :src="SS3"/>
                                        </div>
                                        <div class="desc_wrap">
                                            <div class="title">{{$t('p1.product.s4.text')}}</div>
                                            <div class="desc">{{$t('p1.product.s4.desc')}}</div>
                                        </div>
                                    </div>
                                </el-card>
                            </router-link>
                        </div>
                        <div class="text item">
                            <router-link to="/service?tab=YXWHFW">
                                <el-card class="box_card" shadow="hover">
                                    <div class="content_wrap">
                                        <div class="icon">
                                            <img :src="SS4"/>
                                        </div>
                                        <div class="desc_wrap">
                                            <div class="title">{{$t('p1.product.s5.text')}}</div>
                                            <div class="desc">{{$t('p1.product.s5.desc')}}</div>
                                        </div>
                                    </div>
                                </el-card>
                            </router-link>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <!-- 服务案例 -->
        <div class="block_wrap c2">
            <div class="case">
                <div class="wrap">
                    <!-- <div class="case_label wow animate__animated animate__bounceInDown"> -->
                    <div class="case_label">
                        <div class="title">{{$t('p1.case.title')}}</div>
                        <div class="sub_title">{{$t('p1.case.desc')}}</div>
                    </div>

                    <!-- <div class="case_card_wrap wow animate__animated animate__fadeInUpBig"> -->
                    <div class="case_card_wrap">
                        <div class="text item" v-for="item in caseDataList">
                            <router-link target="_blank" :to="`/case_detail?id=${item.id}`">
                                <div class="box_card">
                                    <img :src="$baseImageUrl+item.poster"/>
                                    <div class="desc">{{item.title}}</div>
                                </div>
                            </router-link>
                        </div>
                    </div>
                    <div class="more wow animate__animated animate__fadeInUpBig">
                        <router-link to="/case">
                            <span>{{$t('p1.case.more')}}</span>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部footer -->
        <Footer />

        <!-- <div id="btt" class="backtop" @click="backTop">

        </div> -->
        <BackTop/>


    </div>
</template>
<script>
import BackTop from '@/views/components/backtop'
import Nav from '@/views/nav/index'
import SwiperComponent from '@/views/swiper_component/index'
import Footer from '@/views/footer/index'
import SS1 from '@/assets/images/wi/SS1.png'
import SS2 from '@/assets/images/wi/SS2.png'
import SS3 from '@/assets/images/wi/SS3.png'
import SS4 from '@/assets/images/wi/SS4.png'
import SS5 from '@/assets/images/wi/SS5.png'
import p4 from '@/assets/images/wi/4.png'
import p5 from '@/assets/images/wi/5.png'
import p6 from '@/assets/images/wi/6.png'
// import p7 from '@/assets/images/wi/7.png'
import p8 from '@/assets/images/wi/8.png'
import { getStore } from '@/libs'
export default {
    name: "index",
    components: {
        BackTop,
        Nav,
        SwiperComponent,
        Footer
    },
    data() {
        return {
            SS1,SS2,SS3,SS4,SS5,p4,p5,p6,p8,

            newsDataList: [],

            caseDataList: [],
        }
    },

    created() {
        this.getNewsDataList()
        this.getCaseDataList()
    },
    mounted() {
        this.$i18n.locale === 'zh' ? this.language = 0 : this.language = 1

        this.$nextTick(() => {
            // 页面滚动到可视区域执行动画
            this.$wow.init()

            window.addEventListener('scroll', this.scrollToTop)
        })
    },
    methods: {


        /**
         * 获取新闻数据
         */
        async getNewsDataList() {
            let terminal = 2
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            const res = await this.$http({
                url: '/api/sitepagelist/list',
                method: 'GET',
                params: {showIndex: 1, status: 1, terminal, country, sortColumns: 'push_date', sortType: 'DESC'}
            })
            if (this.ResultMessage(res, false)) {
                this.newsDataList = res.data || []
            }
        },

        /**
         * 获取案例列表
         */
         async getCaseDataList() {
            let terminal = 2
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            const res = await this.$http({
                url: '/api/sitecase/list',
                method: 'GET',
                params: {showIndex: 1, country}
            })
            if (this.ResultMessage(res, false)) {
                this.caseDataList = res.data
            }
        },

        /**
         * 滚动到指定高度，显示返回顶部按钮
         */
        scrollToTop() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

            let topBtn = document.getElementById('btt');
            if (scrollTop > 300) {
                topBtn.style.display = 'block';
            } else {
                topBtn.style.display = 'none';
            }
        },
        /**
         * 点击返回顶部
         */
        backTop() {
            document.documentElement.scrollTop = 0;
        }
    }
};
</script>

<style lang="scss" scope>
@import './index.scss';
</style>
